<template>
    <div class="sort-table-out">
        <el-dialog
            :title="type == 1 ? '模块排序' : '菜单排序'"
            :visible="sortVisible"
            width="600px"
            :before-close="handleClose"
            :destroy-on-close="true"
            custom-class="sort-w"
        >
            <div style="height: 350px">
                <div class="tab">
                    <Table
                        :data="currentData"
                        :columns="columns"
                        :isPagination="false"
                        :showNo="true"
                        :rowData.sync="rowData"
                        :maxHeight="350"
                        @getIsShow="getIsShow"
                    ></Table>
                </div>
                <div class="sort-fr-btn">
                    <el-button type="success" size="mini" @click="handleSortreverse('restore')" class="el-icon-sort">
                        排序
                    </el-button>
                    <el-button type="success" size="mini" @click="handleSortreverse('reverse')" class="el-icon-sort">
                        倒序
                    </el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleSort('top')"
                        :disabled="isTop"
                        class="el-icon-upload2"
                    >
                        置顶
                    </el-button>

                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleSort('up')"
                        :disabled="isTop"
                        class="el-icon-top"
                    >
                        上移
                    </el-button>
                    <el-button
                        type="warning"
                        size="mini"
                        @click="handleSort('down')"
                        :disabled="isBottom"
                        class="el-icon-bottom"
                    >
                        下移
                    </el-button>
                    <el-button
                        type="warning"
                        size="mini"
                        @click="handleSort('bottom')"
                        :disabled="isBottom"
                        class="el-icon-download"
                    >
                        置底
                    </el-button>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// handleRowClick  getMenuSort
import { getMenuSort } from '@/api/system/menu'
export default {
    props: {
        menuData: {
            type: Array,
            default: () => []
        },
        oldSortData: {
            type: Array,
            default: () => []
        },
        sortVisible: {
            type: Boolean,
            default: false
        },
        columns: {
            type: Array,
            default: () => []
        },
        // 1 模块，2 菜单
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            rowData: {},
            isReverse: false,
            isTop: false,
            isBottom: false,
            currentData: [],
            params: [],
            num: 0,
            oldData: [],
            isRestore: true
        }
    },
    computed: {
        theme() {
            return this.$store.state.settings.theme
        }
    },
    mounted() {
        this.oldData = JSON.parse(JSON.stringify(this.oldSortData))
        this.currentData = this.menuData
    },
    watch: {
        menuData() {
            this.currentData = this.menuData
        }
    },
    methods: {
        handleClose() {},

        // 倒序与还原
        handleSortreverse(type) {
            let thisData = this.currentData
            switch (type) {
                case 'reverse': // 倒序
                    this.currentData = JSON.parse(JSON.stringify(this.oldSortData)).reverse()
                    break
                case 'restore': // 排序
                    console.log('oldSortData', this.oldSortData)
                    this.currentData = JSON.parse(JSON.stringify(this.oldSortData))
                    break
            }
            const params = thisData.map((item, index) => {
                return Object.assign({}, item, {
                    orderNum: index
                })
            })
            this.params = params
        },
        handleSort(type) {
            if (!this.rowData.id) {
                this.$message({ message: '请先选择要移动的菜单！', type: 'warning' })
                return
            }
            const { currentData, rowData } = this
            let oldIndex = this.getArrIndex(currentData, rowData)
            let dataLen = currentData.length

            switch (type) {
                case 'up': // 上移
                    if (oldIndex == 0) {
                        this.$message({ message: '到顶了，不可上移了哦~', type: 'warning' })
                        return
                    }
                    currentData.splice(oldIndex - 1, 0, rowData)
                    currentData.splice(oldIndex + 1, 1)
                    break
                case 'down': // 下移
                    if (oldIndex + 1 == dataLen) {
                        this.$message({ message: '到底了，不可下移了哦~', type: 'warning' })
                        return
                    }
                    currentData.splice(oldIndex + 2, 0, rowData)
                    currentData.splice(oldIndex, 1)
                    break
                case 'top': // 置顶
                    if (oldIndex == 0) {
                        this.oldIndex = 0
                        this.$message({ message: '到顶了，不可上移了哦~', type: 'warning' })
                        return
                    }
                    currentData.unshift(this.rowData)
                    currentData.splice(oldIndex + 1, 1)

                    break
                case 'bottom': // 置地
                    if (oldIndex + 1 == dataLen) {
                        this.$message({ message: '到底了，不可下移了哦~', type: 'warning' })
                        return
                    }
                    currentData.push(rowData)
                    currentData.splice(oldIndex, 1)
                    break
            }

            this.$nextTick(() => {
                this.getIsShow()
            })
            const params = currentData.map((item, index) => {
                return Object.assign({}, item, {
                    orderNum: index
                })
            })
            this.params = params
        },
        getIsShow() {
            const { currentData, rowData } = this
            let oldIndex = this.getArrIndex(currentData, rowData)
            let dataLen = currentData.length
            // 上移，置顶
            if (oldIndex == 0) {
                this.isTop = true
            } else {
                this.isTop = false
            }
            // 下移，置地
            if (oldIndex + 1 == dataLen) {
                this.isBottom = true
                console.log('show++++++')
            } else {
                this.isBottom = false
            }
        },
        handleSubmit() {
            const params = this.params
            getMenuSort(params).then((res) => {
                this.$emit('getList')
                this.handleClose()
            })
        },
        getArrIndex(arr, obj) {
            let index = null
            let key = Object.keys(obj)[0]
            arr.every(function (value, i) {
                if (value[key] === obj[key]) {
                    index = i
                    return false
                }
                return true
            })
            return index
        },
        handleClose() {
            this.$emit('update:sortVisible', false)
        }
    }
}
</script>
<style lang="scss">
.sort-table-out {
    div,
    span {
        cursor: pointer;
    }
    .tab {
        float: left;
        width: 160px;
        margin-left: 148px;
    }
    .current-row td {
        // background-color: #{'var(--theme)'} !important;
        background: #f56c6c !important;
        color: #ffffff !important;
        cursor: pointer;
    }
    .sort-fr-btn {
        margin-bottom: 10px;
        margin-left: 10px;
        display: block;
        float: left;
        width: 80px;
        button {
            margin-bottom: 10px;
            margin-top: 0px;
            margin-left: 0;
        }
    }
}
</style>
